在開發數個網站後,
網頁設計師通常都會思考該如何化繁為簡地設計自己的開發流程,
今天則就提供一些心法讓剛碰觸Sass的朋友了解該如何整合自己的Sass資料,
範例檔就拿前四天我所設計的demo網站流程來示範:
1.設計開發專用的資料夾
通常在設計網頁時,
你自然會發現有一些網頁設計流程都是每次時常在做的,
像這種重工的工作內容,
你就可以思考該如何減少這樣的情況,
像每個網頁都一定會有固定的資料夾與程式檔,
例如一定會有:
1.index.html
2.images資料夾
3.CSS資料夾
所以在做網站時,通常我都會做一個乾淨的版本,
當我要做新專案時,就拿那一份複製貼上,
自然我就節省掉很多開新資料夾與檔案的時間。
那像Sass資料夾,我們就可以一一來審視有哪些Sass我們是可以保留起來,
做為下次開發而用,所以我們就以前幾天所做的Demo網站來看,
如果你沒下載下來的話,可以瀏覽我放在Github檔案,點進去就可以看到各程式碼:
https://github.com/gonsakon/Sass-Layout-Demo/tree/master/sass
Sass架構:
Defaule.sass
└_variable.sass
└_mixin.sass
└_reset.sass
└_extend.sass
└_index.sass
1.default.sass
這個資料夾主要是拿來合併所有的Sass檔案,
同時也是做為HTML要載入CSS的檔案(default.css),
所以當然必須留著。
2._variable.sass
$text-color: #292929
$hot-color: #01a5ca
$width:940px
$line-height: 1.8
$border-color: #F4F4F4
在網頁設計中,
設計全域文字顏色與熱門顏色是一定會有的,
另外網站寬度與行距也ok,
但線條顏色可能就不太會出現,
所以保留前四個起來即可。
3._mixin.sass
@mixin bg($img)
background: url("../images/#{$img}")
width: image-width("../images/#{$img}")
height: image-height("../images/#{$img}")
做網站時,時常會要計算圖片寬高與背景圖案,
所以這個自然也留著
4._reset.sass
reset自然不用說一定要留著的了。
5._extend.sass
%clearfix
&:before
content: ""
display: table
&:after
content: ""
display: table
clear: both
zoom: 1
為了要合併清除浮動的class,
這個自然也是必要的,
所以也留著。
6._index.sass
想當然爾,
裡面所設計的東西都是屬於這個網站內容,
所以全部刪掉。
經由上述的觀察,
你就可以整理出一個乾淨的Sass資料夾,
將他複製出來後,等到下次網站開發就可以高高興興地使用了。
當然當你的網頁技術更加精湛後,
你自然就會逐步擴增你的Sass結構了,
如同我第十八天所分享的部分:http://ithelp.ithome.com.tw/question/10132821
2.思考Sass的設計應用
在做網站的過程中,
其實也是在省思有哪些流程太過繁複,
再利用Sass功能來進行簡化,例如:
a.顏色色碼都盡量變數化
b.如果設計效果上有多重選擇,便可結合if()+@mixin來設計
c.當一塊模組元素要移動到其他頁面元素上時,思考如何用@extend合併相同樣式
d.為了要讓自己快速找到目標程式碼,Sass檔案該分割得多細才容易找到,像譬如表頭的_header.sass又可切割為header資料夾裡面又有_logo.sass、_topbar.sass等等。利用sublime強大搜尋功能也可快速尋找到檔案。所以也有網頁設計師建議,一個Sass檔案不宜放2~300行以上程式碼,這樣便失去Sass程式碼分割化的優點。
從上述的種種例子可以看出,
Sass的設計思維比起以往寫傳統CSS又更加廣泛了些,
希望透過上面第一點的實際操作流程,
讓大家了解該如何逐步整合自己的Sass檔。